﻿<%@ Page Language="C#" MasterPageFile="~/YUIAspNet.Master" AutoEventWireup="true" CodeBehind="DropDownButton.aspx.cs" Inherits="YUIAspNetDemo.Button.DropDownButton" Title="Untitled Page" %>

<%@ Register Src="~/Button/UserControls/ColorPickerButton.ascx" TagName="ColorPickerButton" TagPrefix="yuiUC" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
    <title>YUIAsp.Net Controls : LiveDemo : Button : DropDown Button</title>
        
    <style type="text/css">
        .btnWidth {width:150px}
        .menuWidth {width:180px}
    </style>
        
    <script type="text/javascript">
        function UpdateSelValue(sender, args) {
            args.cancel = true;//no postback
            sender.get_Parent().get_YUIControl().set("label", "<div class='btnWidth'>" + args.item.text + "</div>");
            sender.get_Parent().get_YUIControl().set("value", args.item.value);
            
            //persist value
            if (sender.get_element().id == '<%=btnMnu.ButtonMenu.ClientID %>')
                $get('<%= hidMenu.ClientID %>').value = args.item.text + "|" + args.item.value;
            else if (sender.get_element().id == '<%=btnSplit.ButtonMenu.ClientID %>')
                $get('<%= hidSplit.ClientID %>').value = args.item.text + "|" + args.item.value;
            else alert(sender.get_element().id);
        }
                
    </script>
</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
    <h1>DropDown button</h1>
    
    <p>This sample uses YUIAsp.Net Button control with menu/split display in order to make it act as a custom dropdown list.</p>
    
    <p>It's a successfull replacement for the classic ASP.NET DropDownList.</p>
    
    <h1>DropDownList using menu button</h1>
    <p>
        <yui:Button ButtonType="Menu" ID="btnMnu" runat="server">
            <ButtonMenu CssClass="menuWidth" runat="server">
                <Items>
                    <yui:MenuItem OnClientClick="UpdateSelValue" Text="Bucharest" Value="1"></yui:MenuItem>
                    <yui:MenuItem OnClientClick="UpdateSelValue" Text="Paris" Value="2"></yui:MenuItem>
                    <yui:MenuItem OnClientClick="UpdateSelValue" Text="London" Value="3"></yui:MenuItem>
                    <yui:MenuItem OnClientClick="UpdateSelValue" Text="New York" Value="4"></yui:MenuItem>
                    <yui:MenuItem OnClientClick="UpdateSelValue" Text="Amsterdam" Value="5"></yui:MenuItem>
                </Items>
            </ButtonMenu>
        </yui:Button>
        <asp:HiddenField ID="hidMenu" runat="server" />
    </p>
    
    <h1>DropDownList using split button</h1>
    <p>
        <yui:Button ButtonType="Split" ID="btnSplit" Text="" runat="server">
            <ButtonMenu CssClass="menuWidth" runat="server">
                <Items>
                    <yui:MenuItem OnClientClick="UpdateSelValue" Text="Romania" Value="1"></yui:MenuItem>
                    <yui:MenuItem OnClientClick="UpdateSelValue" Text="France" Value="2"></yui:MenuItem>
                    <yui:MenuItem OnClientClick="UpdateSelValue" Text="UK" Value="3"></yui:MenuItem>
                    <yui:MenuItem OnClientClick="UpdateSelValue" Text="USA" Value="4"></yui:MenuItem>
                    <yui:MenuItem OnClientClick="UpdateSelValue" Text="Holland" Value="5"></yui:MenuItem>
                </Items>
            </ButtonMenu>
        </yui:Button>
        <asp:HiddenField ID="hidSplit" runat="server" />
    </p>
    
    <p><asp:Label ID="lbl" runat="server"></asp:Label></p>
    
    <p><yui:Button ID="btnPB" runat="server" Text="Push me to get selected values/text"></yui:Button></p>
</asp:Content>